<template>
    <div class="resource-all-container">
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item>
                    <el-button @click="add" icon="el-icon-plus">添加表单项</el-button>
                </page-search-item>
                <page-search-item>
                    <el-input v-model="form.keyword" style="width: 160px;" @keyup.enter.native.stop="searchData" placeholder="请输入表单项名称"></el-input>
                </page-search-item>
                <page-search-item>
                    <el-select v-model="form.valueKindId" style="width: 160px;" placeholder="请选择表单项类型" clearable>
                        <el-option
                            v-for="(item, index) in typeList"
                            :key="index"
                            :value="item.id"
                            :label="item.label">
                        </el-option>
                    </el-select>
                </page-search-item>
                <page-search-item>
                    <el-button type="primary" @click="searchData">搜索</el-button>
                </page-search-item>
                <page-search-item>
                    <el-button plain @click="toSetOnly" v-if="nowLevel === 2">设置唯一性</el-button>
                </page-search-item>
                <page-search-item>
                    <el-button plain @click="toSetContact" v-if="nowLevel === 2">设置关联项</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <el-table
            v-show="tableData.length"
            :data="tableData"
            row-key="id"
            class="org-table pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            ref="multipleTable"
            style="width: 100%;height: calc(100% - 128px);overflow-y: auto;"
            @selection-change="onTableSelectionChange">
            <el-table-column
                align="center"
                type="selection"
                :reserve-selection="true"
                width="60">
            </el-table-column>
            <el-table-column
                prop="date"
                label="排序">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.sort" @change="changeSort(scope.row.sort, scope.row.id)" @input="scope.row.sort=scope.row.sort.replace(/^0(0+)|[^\d]+/g,'')"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="表单项名称">
            </el-table-column>
            <el-table-column
                prop="field"
                label="英文字段">
            </el-table-column>
<!--            <el-table-column-->
<!--                prop="unitKind"-->
<!--                label="单位">-->
<!--            </el-table-column>-->
            <el-table-column
                prop="valueKind"
                label="类型">
            </el-table-column>
            <el-table-column
                prop="optionNames"
                label="选项"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="type"
                label="分类">
            </el-table-column>
            <el-table-column
                prop="preset"
                label="来源">
                <template slot-scope="scope">
                    {{ scope.row.preset === 1 ? "系统内置" : "后续新增" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="isSearchShow"
                width="80"
                label="检索展示">
                <template slot-scope="scope">
                    {{ scope.row.isSearchShow === 1 ? "隐藏" : "显示" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="isDownShow"
                label="单选多选展示"
                width="110">
                <template slot-scope="scope">
                    {{ ["6", "7"].includes(scope.row.valueKindId) ? scope.row.isDownShow === 1 ? "隐藏" : "显示" : "-" }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="editData(scope.row)">编辑</el-button>
                    <el-button v-if="scope.row.preset === 2" size="mini" type="text" @click="deleteData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
        <div class="footer-inner" v-show="tableData.length">
            <div class="show-number">
                <div class="num-box">
                    已选<span>{{ batchList.length }}</span>条
                </div>
                <el-divider direction="vertical"></el-divider>
                <el-dropdown trigger="click" @command="handleBatchClick">
                    <el-button
                        class="pbb__search-btn">
                        批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                            icon="el-icon-delete-solid"
                            command="showSearch"
                            :disabled="batchList.length === 0 || !canBatch.changeData">
                            批量设置检索展示
                        </el-dropdown-item>
                        <el-dropdown-item
                            icon="el-icon-delete-solid"
                            command="showDown"
                            :disabled="batchList.length === 0 || !canBatch.changeData">
                            批量设置单选多选展示
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="pageIndex" :limit.sync="pageSize" :pagerCount="5" @pagination="getTable()"/>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { setOnly } from "@/views/resource-manage/src/components/set-only/index";
@Component({
    name: "ResourceAll"
})
export default class ResourceAll extends Vue {
    // 当前选中节点
    @Prop({ default: "" }) private typeId: any;
    // 当前层级
    @Prop({ default: 0 }) private nowLevel: any;
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    }) private currentNode: any;

    // 搜索条件
    form = {
        keyword: "",
        valueKindId: ""
    };

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [];

    // 批量操作数据集合
    batchList: any[] = [];
    canBatch: any = {
        // 是否可以批量修改数据范围
        changeData: false
    };

    typeList = [
        { id: "1", value: "input-text", label: "单行文本" },
        { id: "2", value: "input-textarea", label: "多行文本" },
        { id: "3", value: "input-date", label: "日期" },
        { id: "11", value: "input-datetime", label: "日期时间" },
        { id: "4", value: "location", label: "定位" },
        { id: "6", value: "select", label: "单选" },
        { id: "7", value: "cascader", label: "多选" },
        { id: "12", value: "input-num", label: "整数" },
        { id: "13", value: "input-num-decimal", label: "小数" },
        { id: "5", value: "upload-img", label: "图片" },
        { id: "8", value: "upload-video", label: "视频" },
        { id: "9", value: "upload-record", label: "录音" },
        { id: "10", value: "upload-file", label: "文件" }
    ];

    oldNumber = 0

    created() {
        this.getTable();
    }

    activated() {
        this.getTable();
    }

    // 添加
    add() {
        this.$router.push({ path: "/resource-manage/add", query: { typeId: this.typeId } });
    };

    // 点击查询
    searchData() {
        this.pageIndex = 1;
        this.getTable();
    };

    // 查询表格
    async getTable(id?: any) {
        if (id) this.pageIndex = 1;
        const res = await this.$server["business/getTable"]({
            data: {
                keyword: this.form.keyword,
                valueKindId: this.form.valueKindId,
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                typeId: id || this.typeId || undefined
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 表格选中修改
    onTableSelectionChange(selectList: any[]) {
        const changeDataList = selectList;
        this.canBatch.changeData = changeDataList.length === selectList.length;
        this.batchList = selectList;
    }

    async changeSort(val: any, id: any) {
        const res = await this.$server["business/changeSort"]({
            data: {
                id,
                sort: val || 0
            }
        });
        if (res.data.code === 200) {
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    handleBatchClick(command: any) {
        let title = "";
        let updFlag = 0;
        if (command === "showSearch") {
            title = "批量设置检索展示";
            updFlag = 2;
        } else if (command === "showDown") {
            title = "批量设置单选多选展示";
            updFlag = 1;
        }
        this.$confirm(title, '确认操作', {
            distinguishCancelAndClose: true,
            confirmButtonText: '显示',
            cancelButtonText: '隐藏'
        })
            .then(() => {
                this.setShow(updFlag, 0);
            })
            .catch(action => {
                if (action === 'cancel') {
                    this.setShow(updFlag, 1);
                }
            });
    }

    async setShow(updFlag: any, val: any) {
        const res = await this.$server["resource/batchOpsShow"]({
            data: {
                labelIds: this.batchList.map((item: any) => item.id),
                updFlag,
                val
            }
        });

        if (res.data.code === 200) {
            this.getTable();
            this.$message({
                type: 'success',
                message: '修改成功'
            });
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 设置检索条件
    async setCondition(model: any) {
        const res = await this.$server["business/setCondition"]({
            params: {
                ids: this.batchList,
                condition: model.model
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            await this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 编辑
    editData(row: any) {
        this.$router.push({
            path: "/resource-manage/edit",
            query: {
                id: row.id,
                typeId: row.typeId
            }
        });
    }

    // 删除
    deleteData(row?: any) {
        this.$confirm('是否确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
            const res = await this.$server["resource/delete"]({
                data: {
                    id: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                await this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }

    // 设置唯一性
    toSetOnly() {
        setOnly({
            title: "设置唯一性",
            typeId: this.typeId,
            currentNode: JSON.parse(JSON.stringify(this.currentNode)),
            sure: async(vm: any, model: any) => {
                console.log(vm, model);
                this.$emit("changeOnly", model);
            }
        });
    }

    // 设置关联项
    toSetContact() {
        this.$router.push({
            name: "RelatedItems",
            query: {
                id: this.currentNode.id,
                name: this.currentNode.name
            }
        });
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .pbb__search-box {
        margin-bottom: 10px;
    }
}
.resource-all-container {
    height: 100%;
}
.footer-inner {
    @include flexLayout(flex,justify,center);
    background: #fff;
    margin-top: 10px;
    .show-number {
        margin-left: 18px;
        @include flexLayout(flex,normal,center);
        .num-box {
            font-size: 16px;
            font-family: "PingFang SC Medium";
            color: #9DA1A4;
            span {
                font-size: 16px;
                font-weight: 600;
                color: #37383a;
                padding: 0 4px;
            }
        }
        ::v-deep {
            .el-button--medium {
                padding: 8px 10px;
            }
            .el-button.el-button--medium.pbb__search-btn {
                min-height: 32px;
            }
        }
    }
}
</style>
